<!--简单的树的封装 -->
<template>
  <a-input-search
    v-model:value="searchValue"
    style="margin-bottom: 8px"
    placeholder="Search"
    v-if="isInputShow"
  />
  <div class="btnLIstStyle" v-if="btnListShow">
    <a-row>
      <a-col :span="8">
        <a-button type="primary">
          <template #icon><PlusOutlined /></template>
          新建
        </a-button>
      </a-col>
      <a-col :span="8" :offset="3">
        <a-button @click="refresh">刷新缓存</a-button>
      </a-col>
    </a-row>
  </div>

  <Tree :treeData="treeData" :replaceFields="replaceFields">
    <template #title="{ title, dataRef }">
      <span>{{ title }}</span>
      <span>
        <EditOutlined @click="editNode(dataRef)" />
        <a-popconfirm title="确定删除？">
          <template #icon>
            <question-circle-outlined style="color: red" />
          </template>
          <a href="#"><CloseCircleOutlined /></a>
        </a-popconfirm>
      </span>
    </template>
  </Tree>
  <Modal
    v-model:visible="modalVisible"
    title="编辑"
    @ok="handleOk"
    @cancel="handleCancel"
    ok-text="保存"
    cancel-text="取消"
  >
    <a-form ref="formRef" :model="formInline" :rules="rules" class="formStyle">
      <a-form-item
        label="字典库编码:"
        ref="zidiankubianma"
        name="zidiankubianma"
      >
        <a-input
          v-model="formInline.zidiankubianma"
          placeholder="请输入"
          clearable
        />
      </a-form-item>
      <a-form-item
        label="字典库名称:"
        ref="zidiankumingcheng"
        name="zidiankumingcheng"
      >
        <a-input
          v-model="formInline.zidiankumingcheng"
          placeholder="请输入"
          clearable
        />
      </a-form-item>
      <a-form-item label="备注:" class="noRules">
        <a-textarea v-model:value="formInline.beizhu" />
      </a-form-item>
    </a-form>
  </Modal>
</template>

<script setup>
  import { ref,defineComponent } from 'vue'
  import { Tree, Modal, Input } from 'ant-design-vue'
  import { QuestionCircleOutlined,CloseCircleOutlined } from '@ant-design/icons-vue';
  import {
    EditOutlined,
    DeleteOutlined,
    PlusOutlined,
  } from '@ant-design/icons-vue'
  //父组件传过来的数据
  const props = defineProps({
    isInputShow: {
      typeof: Boolean,
    },
    btnListShow: {
      typeof: Boolean,
    },
    treeData: {
      typeof: Array,
    },
  })
  const searchValue = ref('')
  const formInline = ref({})
  const formRef = ref(null)
  const replaceFields = {
    title: 'title',
    key: 'key',
  }

  const modalVisible = ref(false)
  const editNodeData = ref({})
  const rules = {
    zidiankubianma: [
      { required: true, message: '请输入字典库编码', trigger: 'blur' },
    ],
    zidiankumingcheng: [
      { required: true, message: '请输入字典库名称', trigger: 'blur' },
    ],
  }
  const editNode = (node) => {
    modalVisible.value = true
  }
  //删除树的节点
  const deleteNode = (node) => {
    modalVisible.value = false
    //下面写后台接口
  }
  //编辑树的节点的代码
  const handleOk = () => {
    modalVisible.value = false
    formRef.value.resetFields()
    //下面写后台接口
  }
  //取消按钮
  const handleCancel = () => {
    modalVisible.value = false
    formRef.value.resetFields()
  }
  //刷新缓存
  const refresh = () => {}
</script>

<style>
  /* 样式按需添加 */
  .btnLIstStyle {
    padding-bottom: 15px;
  }
  .noRules {
    margin-left: 12px;
  }
</style>
